<template>
  <div class="container">
    <el-card class="my-box-card" v-if="isDisplayAuditBtn && currentComParams.openType === 'audit'">
      <work-flow-audit-button-com
        :workitemInsId="currentComParams.workitemInsId"
        :busiRelateData="busiRelateData"
        :curUserId="curUserId"
        :curUserName="curUserName"
        :busiOrgId="record.busiOrgId"
        :busiCorpId="record.busiCorpId"
        @auditBefore="auditBefore"
        @auditAfter="auditAfter"></work-flow-audit-button-com>
      <div style="display: inline-block;">
<!--        扩展按钮栏-->
<!--        <div class="auditBtnDiv">-->
<!--          <el-button size="small" type="primary">测试</el-button>-->
<!--        </div>-->
      </div>
    </el-card>

    <el-card class="box-card">
      <work-flow-circulation-com :procInstanceId="record.processInsId"></work-flow-circulation-com>
    </el-card>
    <el-card class="my-box-card">
      <el-form ref="dataForm" :model="record" label-position="top" size="small"  label-width="110px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="标题" prop="title">
              <el-input v-model="record.title" placeholder="标题" :disabled="true" class="myWidth"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="类型" prop="busiType">
              <el-select v-model="record.busiType" placeholder="类型" size="small" :clearable="true" :disabled="true" class="myWidth">
                <el-option
                  v-for="item in typeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card class="my-box-card">
      <work-flow-audit-history-com :busiTypeId="busiTypeId" :busiId="record.id"></work-flow-audit-history-com>
    </el-card>
  </div>
</template>
<script>
  import {
    selectById,
    doPassRecord,
    doRejectRecord
  } from '@/api/busiDemo/busiDemoInfo.js'
  import { closeTab } from '@/utils/index'
  import { workFlowCirculationCom, workFlowAuditHistoryCom,
    workFlowAuditButtonCom } from '@/views/workFlowManage/busiWorkFlowComponents'

  export default {
    name: 'busiDemoInfoView',
    data() {
      return {
        isDisplayAuditBtn: false,
        isDisplayAuditViewBtn: false,
        isRouteOpen: false,
        busiTypeId: 'busiDemoInfo',
        curUserId: this.$store.state.user.userid,
        curUserName: this.$store.state.user.name,
        curOrgId: this.$store.state.user.orgId,
        processInsId: '',
        record: {
          id: '',
          busiTitle: '',
          busiType: '',
          busiUserId: '',
          busiOrgId: '',
          busiCorpId: '',
          processInsId: ''
        },
        typeOptions: [ // 下拉框选项
          {
            value: '01',
            label: '类型01'
          },
          {
            value: '02',
            label: '类型02'
          }
        ],
        busiRelateData: [],
        currentComParams: {}
      }
    },
    props: ['componentCustomProps'],
    components: {
      workFlowCirculationCom,
      workFlowAuditHistoryCom,
      workFlowAuditButtonCom
    },
    created() {
      if (this.componentCustomProps) {
        this.currentComParams = this.componentCustomProps
        this.isRouteOpen = false
      } else {
        this.currentComParams = this.$route.query
        this.isRouteOpen = true
      }
      this.fetchData()
      // this.auditWithdrawEnable()
    },
    watch: {
      componentCustomProps() { // 普通的watch监听通的watch监听
        this.fetchData()
        // this.auditWithdrawEnable()
      }
    },
    methods: {
      fetchData() {
        selectById(this.currentComParams.busiId).then(res => {
          this.loading = false
          if (res.data.success) {
            this.loading = false
            this.record = res.data.data

            this.busiRelateData.length = 0
            this.busiRelateData.push({
              'relateKey': 'type',
              'relateValue': this.record.busiType
            })

            // 加载审核按钮
            this.isDisplayAuditBtn = true

          } else {
            this.$message({
              type: 'error',
              message: '获取详细失败！'
            })
          }
        }).catch((err) => {
          console.log(err)
        })
      },
      auditBefore(btnInfo, busiRelateData) {
        // 可以根据审核按钮设置相关数据
        // 清空数组，不要使用busiRelateData = [] 生成新的对象
        // busiRelateData.length = 0
        // busiRelateData.push({
        //   'relateKey': 'type',
        //   'relateValue': this.record.busiType
        // })
      },
      auditAfter(btnInfo, args) {
        //
        let btnId = btnInfo.buttonId
        if (btnId.endsWith('_doAddSigner') || btnId.endsWith('_doDocumentCirculation')) { // 前加签、公文流转
          //
          this.closeComponent()
        } else if (btnId.endsWith('_doPass') || btnId.endsWith('_doReview') || btnId.endsWith('_doRushToSign')) { // 同意、审阅、抢签
          args.id = this.record.id

          doPassRecord(args).then(res => {
            if (res.data && res.data.success) {
              this.closeComponent()
            } else {
              this.$message({
                type: 'danger',
                message: '操作异常!' + res.message
              })
            }
          }).catch((err) => {
            console.log(err)
          })
        } else if (btnId.endsWith('_doReject')) { // 驳回到申请人
          args.id = this.record.id
          doRejectRecord(args).then(res => {
            if (res.data && res.data.success) {
              this.closeComponent()
            } else {
              this.$message({
                type: 'danger',
                message: '驳回异常!' + res.message
              })
            }
          }).catch((err) => {
            console.log(err)
          })
        }
      },
      closeComponent() {
        // tab打开方式关闭
        if (this.isRouteOpen) {
          try {
            closeTab(this.$route)
          } catch (e) {
            //
          }
        } else {
          // 调用父组件关闭
          try {
            this.$emit('closeComponent')
          } catch (e) {
            //
          }
        }
      }
    }
  }
</script>
<style scoped>
  .container{
    padding: 0 10px;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
  }
  .my-box-card >>> .el-card__body {
    padding: 5px;
  }
  .auditBtnDiv {
    height: 45px;
    overflow: auto;
  }
  .auditBtnDiv >>> .el-button {
    margin: 5px 0px 5px 7px;
  }
  .myWidth{
    width: 70% !important;
  }
</style>
